<template>
  <div>
    <a-dropdown class="navUser-wrppaer">
      <div>
        <img :src="imgUrl" class="userImg" alt="" />
        <span class="userTitle">{{ accountInfo.userName }}</span>
        <a-icon type="caret-down" style="margin-left: 5px" />
      </div>

      <a-menu slot="overlay">
        <a-menu-item>
          <!-- <router-link to="/userSystem/userInfo">个人中心</router-link> -->
          <div
            class="title-box"
            :class="[active == 1 ? 'title-box-active' : '']"
            @click="() => handleUserInfo()"
            @mouseenter="onmouseenter(1)"
            @mouseleave="onmouseleave()"
          >
            <div class="in-box">个人中心</div>
          </div>
        </a-menu-item>
        <a-menu-item>
          <div
            class="title-box"
            :class="[active == 2 ? 'title-box-active' : '']"
            @click="() => (editPaswordVisible = true)"
            @mouseenter="onmouseenter(2)"
            @mouseleave="onmouseleave()"
          >
            <div class="in-box">修改密码</div>
          </div>
        </a-menu-item>
        <a-menu-item>
          <div
            class="title-box"
            :class="[active == 3 ? 'title-box-active' : '']"
            @click="() => logout()"
            @mouseenter="onmouseenter(3)"
            @mouseleave="onmouseleave()"
          >
            <div class="in-box">退出登录</div>
          </div>
        </a-menu-item>
      </a-menu>
    </a-dropdown>
    <MyModal :visible="editPaswordVisible" :width="550" :title="'修改密码'" @handleCancel="handleCancel">
      <template #dialogBox>
        <EditPassword ref="myForm" @cancel="handleCancel" />
      </template>
    </MyModal>
  </div>
</template>

<script>
import MyModal from '@/components/MyModal';
import { mapState } from 'vuex';
import EditPassword from './EditPassword';
import MyTouxiang from '@/assets/nav/user.gif';
import { getImgUrl, fileToBase64 } from '@/utils/index.js';
import { readFile } from '@/api/user.js';
import axios from 'axios';

export default {
  name: 'navUser',
  components: { MyModal, EditPassword },
  data() {
    return {
      editPaswordVisible: false,
      visible: false,
      imgUrl: '',
      active: 0
    };
  },
  computed: {
    ...mapState({
      accountInfo: state => state.user.accountInfo
    })
  },
  watch: {
    accountInfo() {
      this.getImgUrl();
    }
  },
  mounted() {
    this.getImgUrl();
  },
  methods: {
    async logout() {
      await this.$store.dispatch('user/logout');
      await this.$store.dispatch('tagsView/clearTag');
      this.$router.replace({
        path: '/index'
      });
    },
    handleCancel() {
      this.$refs.myForm.resetFields();
      this.editPaswordVisible = false;
    },
    handleEditPassword() {
      this.editPaswordVisible = true;
    },
    getImgUrl() {
      if (this.accountInfo.portrait && this.accountInfo.portrait != '') {
        readFile(this.accountInfo.portrait).then(res => {
          this.imgUrl = res.data;
        });
      } else {
        this.imgUrl = MyTouxiang;
      }
    },
    handleUserInfo() {
      this.$store.dispatch('user/setListActive', 0);
      this.$router.push({
        path: '/userSystem/userInfo'
      });
    },
    onmouseenter(num) {
      this.active = num;
    },
    onmouseleave() {
      this.active = 0;
    }
  }
};
</script>
<style lang="scss" scoped>
.userImg {
  width: 43px;
  height: 43px;
  border-radius: 50%;
  display: inline-block;
}
.userTitle {
  margin-left: 8px;
  font-weight: 700;
  font-size: 1rem;
  display: inline-block;
  width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.title-box {
  color: #fff;
  font-size: 16px;
  padding: 4px 8px;
  border-radius: 4px;
  .in-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    .jiao {
      position: absolute;
      left: -5px;
      top: -5px;
      width: 20px;
      height: 20px;
    }
    .img {
      width: 32px;
      height: 32px;
      position: absolute;
      left: 0;
      top: 0;
    }
  }
}
.title-box-active {
  color: #00ddff;
}
.item {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
}
</style>
<style scoped>
.ant-dropdown-menu {
  background-color: rgba(0, 0, 0, 0.8);
}
.ant-dropdown-menu-item:hover,
.ant-dropdown-menu-submenu-title:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
</style>
